<script setup>
import { ref } from 'vue'
import { userSubmitEvaluateService } from '@/apis/order'

const props = defineProps({
	userID: {
		type: Number,
		required: true
	},
	orderID: {
		type: Number,
		required: true
	}
})

const emits = defineEmits(['closeEvaluateProp'])

// 总评分星级
const ratingCount = ref(5)

// 当前评分星级
const currentRating = ref(1)

// 用户的评论内容
const commentContent = ref(null)

// 提交用户评价
const onSubmitEvaluate = async () => {
	await userSubmitEvaluateService({ userID: props.userID, orderID: props.orderID, rating: ratingCount.value, comment: commentContent.value })
	currentRating.value = 1
	commentContent.value = null
	emits('closeEvaluateProp')
}
</script>

<template>
	<view class="container">
		<view class="rating">
			<up-rate active-color="#FA3534" inactive-color="#b2b2b2" gutter="20" size="30" :count="ratingCount" v-model="currentRating"></up-rate>
		</view>

		<view class="comment">
			<up-textarea placeholder="请输入评价内容" v-model.trim="commentContent" maxlength="-1" height="200"></up-textarea>
		</view>

		<view class="bottom" @tap="onSubmitEvaluate">提交评价</view>

		<script setup></script>
	</view>
</template>

<style lang="scss" scoped>
.container {
	padding: 80rpx 100rpx;

	.comment {
		padding: 50rpx 0;
	}

	.bottom {
		border-radius: 999px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		margin: 0 10rpx;
		color: #fff;
		background-color: #d19a66;
	}
}
</style>
